import { Section } from "@/components";
import classNames from "classnames";
import styles from "./index.module.scss";
import Boy1 from "./imgs/boy1.jpg";
import Boy2 from "./imgs/boy2.png";
import Boy3 from "./imgs/boy3.jpg";
import Girl1 from "./imgs/girl1.jpg";
import Girl2 from "./imgs/girl2.jpg";
import Girl3 from "./imgs/girl3.jpg";
import Girl4 from "./imgs/girl4.jpg";
import Girl5 from "./imgs/girl5.jpg";

/**
 * 3D照片墙+倒影
 */
const PhotoWall = () => {
  return (
    <Section className={styles.wrapper}>
      <h3>3D照片墙+倒影</h3>
      <div className={styles.container}>
        {/* 舞台层 */}
        <div className={styles.stage}>
          {/* 控制层 */}
          <div className={styles.control}>
            {/* 图片层 */}
            <div className={styles.imgWrap}>
              <div className={classNames(styles.img, styles.img1)}>
                <img src={Boy1} />
              </div>
              <div className={classNames(styles.img, styles.img2)}>
                <img src={Boy2} />
              </div>
              <div className={classNames(styles.img, styles.img3)}>
                <img src={Boy3} />
              </div>
              <div className={classNames(styles.img, styles.img4)}>
                <img src={Girl1} />
              </div>
              <div className={classNames(styles.img, styles.img5)}>
                <img src={Girl2} />
              </div>
              <div className={classNames(styles.img, styles.img6)}>
                <img src={Girl3} />
              </div>
              <div className={classNames(styles.img, styles.img7)}>
                <img src={Girl4} />
              </div>
              <div className={classNames(styles.img, styles.img8)}>
                <img src={Girl5} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </Section>
  );
};

export default PhotoWall;
